<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{padding: 10px;margin: 10px;border:4px solid black;}
    </style>
</head>
<body>
    <div id="app">
        <h1>我是：{{title}}，我有：{{msg}}</h1>
        <kx></kx>
    </div>
</body>
<script src="../libs/vue.js"></script>

<template id="kangxi">
    <div>
        <h2>我是：{{title}}，我有：{{msg}}</h2>
        <p>获取到了儿子的：{{childData}}</p>
        <yz :abc="msg" :qwe="123"></yz>
        <yx @abc="getData"></yx>
    </div>
</template>

<template id="yongzheng">
    <div>
        <h3>我是：{{title}}，我有：{{msg}}</h3>
        <p>获取到了父级的：{{ abc }} - {{qwe}}</p>
        <p>获取到了兄弟的：{{ brother }}</p>
        <button @click="send">向兄弟发送数据</button>
        <ql ref="son"></ql>
    </div>
</template>
<template id="yinxiang">
    <div>
        <h3>我是：{{title}}，我有：{{msg}}</h3>
        <button @click="add">向外发送数据</button>
        <p>获取到了兄弟的：{{ brother }}</p>
    </div>
</template>

<template id="qianlong">
    <div>
        <h4>我是：{{title}}，我有：{{msg}}</h4>
        <p>获取到了父级的：{{'未知'}}</p>
        <p>获取到父组件对象的数据：{{ $parent.msg }}</p>
    </div>
</template>

<script>

    const bus = new Vue();

    const ql = {
        template: "#qianlong",
        data(){
            return {
                title: "乾隆",
                msg: "随手涂鸦"
            }
        },
        created(){
            // 在子组件内，获取父组件对象
            // 在js中使用this.$parent获取
            // 在视图中，通过$parent获取
            console.log(this.$parent);
            console.log(this.$parent.msg);
            console.log(this.$parent.show);
            this.$parent.show();
        },
        methods:{
            show(){
                console.log("这是乾隆的show")
            }
        }
    }

    const yx = {
        template: "#yinxiang",
        data(){
            return {
                title: "胤翔",
                msg: "西湖边一栋庭院",
                brother:""
            }
        },
        methods:{
            add(){
                this.$emit("abc", this.msg);
                bus.$emit("qwe", this.msg);
            }
        },
        created(){
            bus.$on("asd", (d)=>{
                this.brother = d;
            })
        }
    }
    const yz = {
        props:{
            abc:{
                required: true,
                type: String
            },
            qwe:{
                default: 0,
                type: Number
            }
        },
        template: "#yongzheng",
        data(){
            return {
                title: "雍正",
                msg: "一壶清茶",
                brother: ""
            }
        },
        components:{
            ql
        },
        methods:{
            send(){
                bus.$emit("asd", this.msg);
            },
            show(){
                console.log("这是雍正的show")
            }
        },
        created() {
            // 组件创建之后，会自动执行的函数
            bus.$on("qwe", (d)=>{
                // console.log(d);
                this.brother = d;
            })
        },
        mounted() {
            // 在父组件内获取子组件对象
            // 1. 在父组件调用子组件的位置，给子组件添加ref属性
            // 2. 在父组件挂载到页面之后，可以通过this.$refs.xxx的形式获取子组件对象
            console.log( this.$refs.son.msg )
            console.log( this.$refs.son.show )
            this.$refs.son.show();
        },
    }
    
    const kx = {
        template: "#kangxi",
        data(){
            return {
                title: "康熙",
                msg: "二环的四合院",
                childData: ""
            }
        },
        components:{
            yz, yx
        },
        methods: {
            getData(d){
                // console.log(d);
                this.childData = d;
            }
        }
    }

    new Vue({
        el:"#app",
        data:{
            title: "努尔哈赤",
            msg: "大清江山"
        },
        components:{
            kx
        }
    })

</script>
</html>